<div class="page-title">
  <h4>触发器列表</h4>
  <!--nzi-document-center-->
  <a class="pull-right help-link" nzi-document-center [docTitle]="'触发器管理'">
    <i class="anticon anticon-question-circle-o"></i>触发器使用指南
  </a>
</div>
<div class="page-header">
  <p style="margin-bottom: 0;">触发器用于连接函数与外部服务，通过在函数中设置触发器，用户可以定义和管理事件来源，从而指定什么样的外部服务可以产生事件来触发函数的执行。</p>
</div>
<div class="padding-content area-col-white">
  <div class="table-top">
    <div class="table-operations clearfix ">
      <div class="pull-left">
        <in-acl-source [inGroup]="'headerAction'" [inService]="'fcs'" [inResourceType]="'fcs-trigger'"
          [inActions]="['CreateTrigger']" [inIsLast]="true" #headerAction>
          <in-acl-btn [inActions]="headerAction.resActions" inAction="CreateTrigger" inLabel="创建触发器" > 
        <button nz-button nzType="primary" class="btn-add" (click)="createTrigger()"><i class="fas fa-plus"></i>创建触发器
        </button>
          </in-acl-btn>
        </in-acl-source>
      </div>
      <div class="pull-right">
        <nz-select class="select-item" [nzShowSearch]="true" nzShowSearch  [(ngModel)]="groupId"
           nzPlaceHolder="请选择应用" [nzLoading]="isLoadingApplication" (ngModelChange)="getFunctionList(groupId)"
           nzNotFoundContent="没有可用的应用">
          <nz-option *ngFor="let object of applicationList" [nzLabel]="object.displayName" [nzValue]="object.id">
          </nz-option>
        </nz-select>
        <nz-select class="select-item" [nzShowSearch]="true" nzShowSearch [(ngModel)]="functionId" (ngModelChange)="functionIdChange()"
                   nzPlaceHolder="请选择函数"
                   [nzLoading]="isLoadingFunction"
                   nzNotFoundContent="没有可用的函数">
          <nz-option *ngFor="let object of functionList" [nzLabel]="object.functionName" [nzValue]="object.functionId" [nzDisabled] = "disableFunctionOption">
          </nz-option>
        </nz-select>
        <!-- 搜索 -->
        <nz-select nzPlaceHolder="请选择触发器类型" class="select-item"  [(ngModel)]="triggerType" (ngModelChange)="triggerTypeChange()">
          <nz-option *ngFor="let object of triggerTypeList"
                     [nzLabel]="object.label" [nzValue]="object.value">
          </nz-option>
        </nz-select>
        <!-- <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
          <input type="text" nz-input placeholder="请输入触发器名称" [(ngModel)]="triggerName" (keyup.enter)="searchTriggers()">
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button class="search-btn"
                  nzSearch
                  (click)="searchTriggers()">
            <i class="anticon anticon-search search-icon"></i>
          </button>
        </ng-template> -->

        <nz-input-group nzSearch [nzSuffix]="suffixIconButton" style="width: 2rem;">
          <input type="text" [(ngModel)]="triggerName" nz-input placeholder="请输入触发器名称查询" (keyup.enter)="searchTriggers()">
        </nz-input-group>
        <ng-template #suffixIconButton>
          <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="triggerName" (click)="triggerName = '';searchTriggers()"></i>
          <button nz-button nzSearch (click)="searchTriggers()">
            <i class="anticon anticon-search"></i>
          </button>
        </ng-template>


        <button nz-button class="table-top-opt" (click)="refreshTriggerList()" nz-popover [nzContent]="'刷新'"><i
          class="anticon anticon-reload"></i></button>
      </div>
    </div>
  </div>
  <app-trigger-table #triggerTable [groupId]="groupId" [functionId]="functionId" [isDetail]="isDetail" [type]="triggerType" [triggerName] = "triggerName" [currentRegion]="currentRegion" [groupList]="applicationList" [functionList]="functionList" (resetTriggerTypes)="resetTriggerTypeList($event)" [inActions]="headerAction.resActions"></app-trigger-table>
</div>
